<template>
	<view class="pagebox">
		<view class="navbox" :style="{height:`${obj.wh.navHeight}px`}">
			<view class="status" :style="{height:`${obj.wh.statusBarHeight}px`}"></view>
			<view class="navigation" :style="{height:`${obj.wh.navigationBarHeight}px`,width:`${obj.wh.custom.left}px`}">
				<image class="returnicon" src="../static/7.png" mode="aspectFill" @click="proxy.$c.go_url('','navigateBack',1)"></image>
			</view>
		</view>
		<template v-if="obj.d">
			<!-- banner -->
			<view class="bannerbox flex-center" v-if="obj.bannertabs.length">
				<template v-if="obj.bannertabs[obj.banneridx]=='视频'">
					<swiper class="swiper" circular>
						<swiper-item class="swiper-item" v-for="(v,i) in obj.d.imgs.videos" :key="i">
							<video :src="v" class="w100 h100"></video>
						</swiper-item>
					</swiper>
				</template>
				<template v-if="obj.bannertabs[obj.banneridx]=='主图'">
					<swiper class="swiper" :current="obj.current" circular autoplay :interval="3000" @change="bannerChange">
						<swiper-item class="swiper-item" v-for="(v,i) in obj.d.imgs.albums" :key="i">
							<image :src="v" mode="widthFix" @click="preimage(i)"></image>
						</swiper-item>
					</swiper>
				</template>
				<view v-if="obj.bannertabs[obj.banneridx]=='主图'" :style="{top: `${obj.wh.navHeight+10}px`}" class="nums_">{{obj.current+1}}/{{obj.d.imgs.albums.length}}</view>
				<view class="bannertabs flex-row-center">
					<view v-for="(v,i) in obj.bannertabs" :key="i" :class="['bannertab flex-center',obj.banneridx==i?'bannertabact':'']" @click="obj.banneridx=i">{{v}}</view>
				</view>
			</view>
			
			<!-- 价格 -->
			<view class="pd20">
				<view class="basebox pd20 flex-row-center" style="overflow-y: hidden;" v-if="obj.d.preferential.length">
					<!-- <view class="flex-column">
						<view class="pre_l">价格</view>
						<view class="pre_l pre_b">起订量</view>
					</view> -->
					<view id="special_prices_box" class="flex1 flex-row overflow-x" style="overflow-y: hidden;">
						<view id="special_prices" class="flex-row-center" style="display: inline-flex;">
							<view class="flex-column mr40" style="flex-shrink: 0;" v-for="(v,i) in obj.d.preferential">
								<view class="special_price">¥{{v.special_price}}<text style="font-size: 22rpx;">/{{v.unit}}</text></view>
								<!-- <view class="min_nums">{{v.min_nums}}{{v.unit}}起批</view> -->
							</view>
						</view>
					</view>
					<!-- <image v-if="obj.rooliconshow" class="rollicon" src="../static/29.png" mode="aspectFill"></image> -->
				</view>
				<view v-if="!obj.d.preferential.length" class="nodata">暂无优惠方案</view>
			</view>
			
			<!-- 标题 -->
			<view class="protitle pd30-row">{{obj.d.title}}</view>
			
			<!-- 真实性 -->
			<view class="pd20">
				<view class="warningdesc pd20 flex-row-center">
					<image class="icon" src="../static/21.png" mode="widthFix"></image>
					<text>货源所属商家已经经过真实性核验</text>
				</view>
			</view>
			
			<!-- tab -->
			<view class="tabbox flex-row-center pd30-row">
				<view :class="['tab flex-center',obj.tabidx==i?'tabactive':'']" v-for="(v,i) in obj.tabs" :key="i" @click="obj.tabidx=i">{{v}}</view>
			</view>
			
			<view style="width: 100vw;height: 22rpx;background: #F2F3F6;"></view>
			
			<template v-if="obj.tabidx==0">
				<view class="detailcard">
					<view class="labeltitle mb20">产品规格</view>
					<view class="flex-row mb20">
						<view class="label">货号</view>
						<view class="labelc">{{obj.d.itemnumber}}</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">品名</view>
						<view class="labelc">{{obj.d.title}}</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">目数</view>
						<view class="labelc">{{obj.d.mesh}}目</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">丝径</view>
						<view class="labelc">{{obj.d.wire_diameter}}mm</view>
					</view>
					<view class="flex-row mb20" v-if="obj.d.aperture_min||obj.d.aperture_max">
						<view class="label">孔径</view>
						<view class="labelc">{{obj.d.aperture_min||'--'}}～{{obj.d.aperture_max||'--'}}mm</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">材质</view>
						<view class="labelc">{{obj.d.material}}</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">编型</view>
						<view class="labelc">{{obj.d.weaving_type}}</view>
					</view>
					<view class="flex-row mb20" v-if="obj.d.length">
						<view class="label">长度</view>
						<view class="labelc">{{obj.d.length}}m</view>
					</view>
					<view class="flex-row mb20" v-if="obj.d.width">
						<view class="label">宽度</view>
						<view class="labelc">{{obj.d.width}}m</view>
					</view>
				</view>
				
				<view style="width: 100vw;height: 22rpx;background: #F2F3F6;"></view>
				
				<view class="detailcard">
					<view class="labeltitle mb20">其他信息</view>
					<view class="flex-row mb20" v-for="(v,i) in obj.d.parameters" :key="i">
						<view class="label">{{v.name}}</view>
						<view class="labelc">{{v.desc}}</view>
					</view>
					<view v-if="!obj.d.parameters.length" class="nodata">暂无数据</view>
				</view>
			</template>
			
			<template v-if="obj.tabidx==1">
				<u-parse noData="暂无内容" className="u-parse" :content="obj.d.detail||''" :imageProp="obj.imageProp"></u-parse>
			</template>
			
			<template v-if="obj.tabidx==2">
				<view class="pd30 flex-row wrap" v-if="obj.prolist.length">
					<view v-for="(v,i) in obj.prolist" :key="i" class="proitem" @click="proxy.$c.go_url(`/pages/productDetail?id=${v.product_id}&size_id=${v.size_id}&identity=${obj.identity}`)">
						<view class="coverbox"><image class="cover" :src="v.imgs.cover" mode="aspectFill"></image></view>
						<view class="pd20-column">
							<view class="itemtitle lineOne">{{v.title}}</view>
							<view class="price" v-if="v.price">
								<text>¥{{v.price}}</text>
								<text class="desc">元/{{v.unit_}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="!obj.prolist.length" class="pd30"><view class="nodata">暂无数据</view></view>
			</template>
		</template>
		
		<view class="bottombox flex-row-center pd30-row" v-if="obj.identity==='user'">
			<view class="flex-column-center mr30" @click="proxy.$c.go_url(`/pages/companyDetail?id=1&name=江苏瑞佳丝网制品有限公司`)">
				<image class="bicon" src="../static/41.png" mode="aspectFill"></image>
				<text class="bt">厂家</text>
			</view>
			<button class="button base-bg w-color" :disabled="inquiryDis" @click="inquiry">发起询盘</button>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch } from 'vue'
	import uParse from '@/components/u-parse/u-parse.vue'
	import { onLoad } from '@dcloudio/uni-app'
    let { proxy } = getCurrentInstance()
	let obj = reactive({
		identity: 'user',
		wh: proxy.$c.getglobal(),
		id: '',
		size_id: '',
		d: null,
		bannertabs: [],
		banneridx: 0,
		current: 0,
		tabs: ['概览','详细信息','推荐'],
		tabidx: 0,
		imageProp: {
			mode: "widthFix"
		},
		rooliconshow: false,
		req: {
			"key": "",
			"mesh_max": "",
			"mesh_min": "",
			"wire_diameter_max": "",
			"wire_diameter_min": "",
			"aperture": "",
			"length_max": "",
			"length_min": "",
			"width_max": "",
			"width_min": "",
			"material": "",
			"weaving_type": "",
			"tag_scene": "",
			"tag_industry": "",
			"tag_product": "",
			"currentpage": 1,
			"pagesize": 1000
		},
		prolist: [],
		inquiryDis: false,
	})
	
	onLoad((opt)=>{
		if(!opt.id){
			uni.showToast({title: '产品获取失败！',icon: 'none'})
			uni.navigateBack({delta:1})
		}
		obj.identity = opt.identity||'user'
		obj.id = opt.id
		obj.size_id = opt.size_id||''
		getdetail()
		getpros()
	})
	
	const getdetail=()=>{
		uni.showLoading({title: '获取中...'})
		proxy.$reQuest.post(obj.identity==='cs'?'customerservice/product/get':'mp/product/get',{product_id:obj.id,size_id:obj.size_id},{token: true},).then(res=>{
			uni.hideLoading()
			if(res.success){
				obj.d = res.msg||{}
				if(obj.d.size&&obj.d.size.length){
					obj.d.length = obj.d.length||obj.d.size[0].w
					obj.d.width = obj.d.width||obj.d.size[0].h
				}
				obj.d.imgs.albums = obj.d.imgs.albums?obj.d.imgs.albums.split(','):[]
				obj.d.imgs.videos = obj.d.imgs.videos?obj.d.imgs.videos.split(','):[]
				if(obj.d.imgs.albums.length){obj.bannertabs.push('主图')}
				if(obj.d.imgs.videos.length){obj.bannertabs.push('视频')}
				setTimeout(()=>{
					uni.createSelectorQuery().in(proxy).select("#special_prices_box").boundingClientRect((d1) => {
						uni.createSelectorQuery().in(proxy).select("#special_prices").boundingClientRect((d2) => {
							obj.rooliconshow = d2.width>d1.width
						}).exec();
					}).exec();
				},0)
			}else{
				uni.showToast({title: '产品获取失败！',icon: 'none'})
				uni.navigateBack({delta:1})
			}
		}).catch(err=>{
			uni.hideLoading()
			uni.showToast({title: '产品获取失败！',icon: 'none'})
			uni.navigateBack({delta:1})
		})
	}
	 
	 const getpros=()=>{
		 proxy.$reQuest.post(obj.identity==='cs'?'customerservice/product/list':'mp/product/list',obj.req[obj.tabidx],{token: true},).then(d=>{
			 obj.prolist = d.msg.list||[]
			 obj.prolist.map(e=>{
				 e.price = ''
				 if(e.preferential&&e.preferential.length){
				 	const o1 = e.preferential.find(ev=>ev.unit=='平方米')
				 	const o2 = e.preferential.find(ev=>ev.unit=='米')
				 	const o3 = e.preferential.find(ev=>ev.unit=='张')
				 	const o4 = e.preferential.find(ev=>ev.unit=='卷')
				 	e.price = o1 ? o1.special_price : (o2 ? o2.special_price : (o3 ? o3.special_price : (o4 ? o4.special_price : '')))
				 	e.unit_ = o1 ? `平方米` : (o2 ? `米` : (o3 ? `张` : (o4 ? `卷` : '')))
				 }
			 })
		 }).catch(err=>{})
	 }
	
	const preimage=(current)=>{
		uni.previewImage({
			current: current,
			urls: obj.d.imgs.albums
		})
	}
	
	 const fuzhi=(text)=>{
		 uni.setClipboardData({
		 	data: text,
		 	success: function () {
		 		console.log('success');
		 	}
		 });
	 }
	 
	 const inquiry=()=>{
		 obj.inquiryDis = true
		 proxy.$reQuest.post('mp/product/inquiry',{product_id:obj.id},{token: true},).then(d=>{
			 if(d.success&&d.msg){
				 obj.inquiryDis = true
				 proxy.$c.go_url(`/pages/customer/chat${proxy.$c.JSONToUrl({
					 ...d.msg,
					 isNewpro: 1,
					 identity: 'user',
					 product_id: obj.id,
					 size_id: obj.size_id
				 })}`)
				 // uni.showToast({title: '询盘成功！',icon: 'none'}) 
			 }else{
				 obj.inquiryDis = false
				uni.showToast({title: d.err||'询盘失败！',icon: 'none'}) 
			 }
		 }).catch(err=>{
			 obj.inquiryDis = false
			 uni.showToast({title: '询盘失败！',icon: 'none'})
		 })
	 }
	 
	 const bannerChange=(e)=>{
		 obj.current = e.detail.current
	 }
</script>

<style lang="scss" scoped>
.pagebox{
	width: 100vw; height: 100vh; background: #fff; overflow-y: auto;
	padding-bottom: 140rpx;box-sizing: border-box;
	.navbox{
		position: fixed;left: 0;top: 0;z-index: 999999;width: 100vw;
		.status{width: 100vw;}
		.navigation{
			width: 100vw;
			padding: 0 50rpx;box-sizing: border-box;
			display: flex;flex-direction: row;align-items: center;
			.returnicon{width: 50rpx;height: 50rpx;margin-bottom: 30rpx;}
		}
	}
	.bannerbox{
		position: relative;
		width: 100vw;height: 750rpx;background: #f9f9f9;
		.swiper,.swiper-item{
			width: 100vw !important;height: 750rpx !important;
			.video{width: 100%;height: 100%;}
			image{width: 100%;height: 100%;}
		}
		.nums_{
			position: absolute;right: 30rpx;z-index: 100;
			padding: 0rpx 8rpx;font-size: 24rpx;color: rgba(255,255,255,0.8);border-radius: 5rpx;background-color: rgba(0,0,0,0.6);
		}
		.bannertabs{
			position: absolute;right: 20rpx;bottom: 20rpx;
			width: 200rpx;height: 60rpx;border-radius: 60rpx;background-color: rgba(235,235,235,0.3);
			padding: 10rpx;box-sizing: border-box;
			.bannertab{width: 90rpx;height: 45rpx;border-radius: 45rpx;background-color: rgba(255,255,255,0);font-size: 22rpx;color: #000;}
			.bannertabact{background-color: rgba(255,255,255,1);font-weight: bold;}
		}
	}
	.banner{width: 100vw;height: 460rpx;}
	.basebox{
		background: #F4F4F4;border-radius: 13rpx;
		#special_prices_box::-webkit-scrollbar {
			display: none;
		}
		.pre_l{width: 100rpx;height: 44rpx; font-size: 24rpx; line-height: 24rpx; color: #333;}
		.pre_b{height: 24rpx;}
		.special_price{font-size: 36rpx; line-height: 36rpx; font-weight: bold;color: #333;height: 44rpx;}
		.min_nums{font-size: 24rpx; line-height: 24rpx; color: #333;height: 24rpx;}
		.rollicon{width: 30rpx;height: 30rpx;margin-left: 10rpx;opacity: 0.6;}
	}
	.protitle{font-size: 32rpx;font-weight: bold;}
	.warningdesc{
		width: 100%;border-radius: 13rpx;background: #FCF8F1;font-size: 22rpx;color: #A46421;
		.icon{width: 30rpx;height: 30rpx;margin-right: 10rpx;}
	}
	.tabbox{
		background: #fff;height: 70rpx;
		.tab{font-size: 28rpx;color: #333;flex: 1;height: 70rpx;}
		.tabactive{font-weight: bold;color: #333;position: relative;}
		.tabactive::before{
			content: '';position: absolute;z-index: 1;display: block;
			left: 50%;bottom: 0;width: 160rpx;margin-left: -80rpx;height: 4rpx;background-color: #000;
		}
	}
	.detailcard{
		padding: 30rpx;background-color: #fff;
		.labeltitle{font-size: 32rpx;font-weight: bold;}
		.label{width: 120rpx;font-size: 29rpx;color: #666;}
		.labelc{flex: 1;font-size: 29rpx;color: #333;font-weight: bold;}
	}
	.proitem{
		width: 330rpx;margin-right: 30rpx;border-radius: 25rpx;overflow: hidden;
		margin-bottom: 40rpx;
		.swiper,.swiper-item{
			width: 330rpx !important;height: 330rpx !important;border-radius: 15rpx;overflow: hidden;
			image{width: 100%;height: 100%;}
		}
		.coverbox{width: 330rpx;height: 330rpx;border-radius: 25rpx;overflow: hidden; background-color: #f0f0f0;border: solid 1rpx #f3f3f3;box-sizing: border-box;}
		.cover{width: 100%;height: 100%;}
		.itemtitle{font-size: 27rpx;color: #333;font-weight: 400;}
		.price{
			font-size: 38rpx;color: #333;font-weight: bold;
			.desc{font-size: 26rpx;font-weight: 400;color: #999;margin-left: 5rpx;}
		}
		.min_nums{font-size: 27rpx;color: #333;font-weight: 400;}
	}
	.proitem:nth-child(2n){margin-right: 0;}
	.nodata{width: 100%;height: 100rpx;text-align: center;line-height: 100rpx;border-radius: 10rpx;background: #f0f0f0;font-size: 22rpx;color: #999;}
	
	.bottombox{
		position: fixed;left: 0;bottom: 0; z-index: 99; width: 100vw;height: 140rpx;background: #fff;box-shadow: 0 -10rpx 10rpx 10rpx rgba(0,0,0,0.05);
		.bicon{width: 50rpx;height: 50rpx;}
		.bt{font-size: 26rpx;margin-top: 10rpx;}
		.button{flex: 1;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;}
	}
}

::v-deep .wxParse image{width: 100% !important;display: block !important;vertical-align: middle !important;}
::v-deep .wxParse video{width: 100% !important;}
::v-deep .u-parse view{font-size: 28rpx;}
</style>
